<div class="animated fadeIn">
  
  <!--/.row-->
  <div class="row">
    <div class="col-lg-12">
      <div class="card">
        <div class="card-header">
          <!--<i class="fa fa-align-justify"></i> 用户列表-->
           <a [routerLink]="['/user/add']"><i class="fa fa-plus fa-lg mt-2"></i> 新增用户</a>
        </div>
        <div class="card-block">
          <table class="table table-bordered table-striped table-condensed">
            <thead>
              <tr>
                <th>用户编号</th>
                <th>姓名</th>
                <th>用户类型</th>
                <th>是否启用</th>
                <th>操作</th>
              </tr>
            </thead>
            <tbody>
              <tr  *ngFor="let user of users" >
                <td>{{user.id}}</td>
                <td>{{user.username}}</td>
                <td>{{user.usertype}}</td>
                <td>
                  <span class="badge badge-success">{{user.enabled}}</span>
                </td>
                <td>
                   <button  type="button" class="btn btn-sm btn-danger" (click)="updataUser(user.id)"><i class="fa fa-ban"></i> 修改</button>
                   <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" (click)="updateDeleteId(user.id); largeModal.show()"> 删除</button>
                </td>
              </tr>
            </tbody>
          </table>
          <nav>
            <ul class="pagination">
              <li class="page-item"><a class="page-link" href="#">Prev</a></li>
              <li class="page-item active">
                <a class="page-link" href="#">1</a>
              </li>
              <li class="page-item"><a class="page-link" href="#">2</a></li>
              <li class="page-item"><a class="page-link" href="#">3</a></li>
              <li class="page-item"><a class="page-link" href="#">4</a></li>
              <li class="page-item"><a class="page-link" href="#">Next</a></li>
            </ul>
          </nav>
        </div>
      </div>
    </div>
    <!--/.col-->
  </div>
  <!--/.row-->
</div>

<div bsModal #largeModal="bs-modal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title">友情提示</h4>
        <button type="button" class="close" (click)="largeModal.hide()" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <p>删除后无法恢复，确定删除该用户吗</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" (click)="largeModal.hide()">关闭</button>
        <button type="button" class="btn btn-primary" (click)="largeModal.hide();deleteUser()">确定</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
